import React from "react";
import { apis } from "../../apis";
import { AccessLog, Pager } from "../../../server/interface";
import { Table } from "antd";

const LogList = () => {
    const [data, setData] = React.useState<Pager<AccessLog>>()
    const [loading, setLoading] = React.useState(false)
    const [page, setPage] = React.useState(1)

    const onSearch = () => {
        setLoading(true)
        apis.log_list({
            page: page,
            pageSize: 10,
        }).then((res) => {
            setData(res.data)
            setLoading(false)
        })
    }

    React.useEffect(() => {
        onSearch()
    }, [page])
    
    return (
        <>
            <div className="py-2">

            </div>
            <Table loading={loading} columns={[
                {
                    title: "序号",
                    dataIndex: "index",
                    key: "index",
                    render: (_, record, index) => page * 10 + index - 9,
                },
                {
                    title: "域名",
                    dataIndex: "requestDomain",
                    key: "requestDomain",
                },
                {
                    title: "访问IP",
                    dataIndex: "clientIp",
                    key: "clientIp",
                },
                {
                    title: "请求时间",
                    dataIndex: "requestTime",
                    key: "requestTime",
                },
                {
                    title: "请求状态",
                    dataIndex: "status",
                    key: "status",
                },
                {
                    title: "浏览器版本",
                    dataIndex: "browserVersion",
                    key: "browserVersion",
                },
                {
                    title: "设备信息",
                    dataIndex: "deviceInfo",
                    key: "deviceInfo",
                },
                {
                    title: "UUID",
                    dataIndex: "deviceUuid",
                    key: "deviceUuid",
                },
                {
                    title: "操作系统",
                    dataIndex: "operatingSystem",
                    key: "operatingSystem",
                },
                {
                    title: "用户标识",
                    dataIndex: "userIdentifier",
                    key: "userIdentifier",
                },
                {
                    title: "创建时间",
                    dataIndex: "createdAt",
                    key: "createdAt",
                    render: (time) => new Date(time).toLocaleString(),
                },
                {
                    title: "创建人",
                    dataIndex: "createdBy",
                    key: "createdBy",
                },
            ]} dataSource={data?.list} rowKey="_id" pagination={{
                total: data?.total,
                pageSize: 10,
                current: page,
                onChange: (page) => {
                    setPage(page)
                }
            }}/>
        </>
    )
}
export default LogList;